$PI: 3.141592653589793;

/// Border Polygon
/// @param {number} $num - 多边型数量
/// @param {string} $color [#000] - 多边型颜色
/// @param {number} $radius [64px] - 多边型背景
/// @author 大漠
/// @link http://www.w3cplus.com/preprocessor/creat-css-polygon-wiht-border-and-clip-path-property.html
@mixin border-polygon($num, $color: #000, $radius: 64px) {
    position: relative;
    height: 2.5*$radius;
    width: 2.5*$radius;
    div {
        $halfWidth: tan($PI / $num) * $radius + 1; // + 1.5 to account for anti-aliasing
        border-top: #{$radius} solid $color;
        border-left: #{$halfWidth} solid transparent;
        border-right: #{$halfWidth} solid transparent;
        position: absolute;
        left: 50%;
        top: 50%;
        transform-origin: 50% 100%;
        @for $i from 0 through $num {
            &:nth-child(#{$i}) {
                transform: translate(-50%, -100%) rotate(360deg / $num * $i);
            }
        }
    }
}

/// 使用 clip 制作多边形
/// @param {number} $num - 多边形数量
/// @param {string} $color - 多边形颜色
/// @param {number} $radius - 多边形半径
/// @author 大漠
/// @link http://www.w3cplus.com/preprocessor/creat-css-polygon-wiht-border-and-clip-path-property.html
@mixin clip-polygon($num, $color, $radius: 64px) {
    position: relative;
    width: $radius*2;
    height: $radius*2;
    background: $color;
    $points: ();
    @for $i from 0 to $num {
        $angle: 360deg/2/$num + 360deg / $num * $i;
        $pointX: 50% + sin($angle)*50%;
        $pointY: 50% + cos($angle)*50%;
        $points: append($points, unquote($pointX+" "+$pointY), "comma");
    }
    clip-path: polygon(#{$points});
}